<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quản Lý Tính Sẵn Sàng Của Lái Xe | Phần Mềm Quản Lý Điều Hành Xe
	| CÔNG TY TNHH DỊCH VỤ MINH VIỆT</title>

<!-- Bootstrap framework -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" />
<!-- gebo blue theme-->
<link rel="stylesheet" href="css/blue.css" id="link_theme" />
<!-- breadcrumbs-->
<link rel="stylesheet" href="lib/jBreadcrumbs/css/BreadCrumb.css" />
<!-- tooltips-->
<link rel="stylesheet" href="lib/qtip2/jquery.qtip.min.css" />
<!-- notifications -->
<link rel="stylesheet" href="lib/sticky/sticky.css" />
<!-- code prettify -->
<link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
<!-- notifications -->
<link rel="stylesheet" href="lib/sticky/sticky.css" />
<!-- splashy icons -->
<link rel="stylesheet" href="img/splashy/splashy.css" />
<!-- colorbox -->
<link rel="stylesheet" href="lib/colorbox/colorbox.css" />
<!-- enhanced select -->
<link rel="stylesheet" href="lib/chosen/chosen.css" />
<!-- datepicker -->
<link rel="stylesheet" href="lib/datepicker/datepicker.css" />
<!-- main styles -->
<link rel="stylesheet" href="css/style.css" />
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" />
<!--[if lte IE 8]>
        <link rel="stylesheet" href="css/ie.css" />
        <script src="js/ie/html5.js"></script>
        <script src="js/ie/respond.min.js"></script>
    <![endif]-->

</head>
<body class="gebo-fixed menu_hover sidebar_hidden">
	<div id="maincontainer" class="clearfix">
		<!-- header -->
      <?php include 'menu.php'; ?>

      <!-- main content -->
		<div id="contentwrapper">
			<div class="main_content">
				<!-- BreadCrumb -->
				<nav>
					<div id="jCrumbs" class="breadCrumb module">
						<ul>
							<li><a href="#"><i class="icon-home"></i></a></li>
							<li><a href="#">Điều hành xe</a></li>
							<li>Quản lý tính sẵn sàng của lái xe</li>
						</ul>
					</div>
				</nav>
				<!-- End BreadCrumb -->
				<div class="row-fluid">
					<div class="span12">
						<div class="heading">
							<h3 class="">Quản lý tính sẵn sàng của lái xe</h3>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<form class=" form-inline ">
							<button type="button" class="btn btn-danger btn-small">Xóa</button>
							<div class="input-append">
								<input type="text" class="input-medium " placeholder="Tên tài xế">
                                <div class="input-append date" id="s_dr_start">
                                  <input class="input-small" type="text" readonly="readonly" placeholder="Từ ngày"><span class="add-on"><i class="splashy-calendar_day_down"></i></span>
                                </div>
                                <div class="input-append date" id="s_dr_end">
                                    <input class="input-small" type="text" readonly="readonly" placeholder="Đến ngày"><span
                                        class="add-on"><i class="splashy-calendar_day_up"></i></span>
                                </div>                                  
								<button type="submit" class=" btn">Tìm kiếm</button>
								<a href="#addnewdriverready" data-toggle="modal"
									data-backdrop="static" class="btn btn-primary"><i
									class=" icon-white icon-plus"></i>Thêm Trạng thái</a>
							</div>
						</form>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<table class="table table-condensed table-bordered">
							<thead>
								<tr>
									<th><input type="checkbox"></th>
									<th>ID tài xế</th>
									<th>Họ tên lái xe</th>
									<th>Nghỉ từ ngày</th>
									<th>Tới ngày</th>
									<th style="width: 300px;">Lý do</th>
									<th style="width: 70px;">Thao tác</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><input type="checkbox"></td>
									<th>12</th>
									<td>Nguyễn văn A</td>
									<td>20/06/2013</td>
									<td>21/06/2013</td>
									<td>Bị ốm quá không lái xe được</td>
									<td><a href="#editdriverready" data-toggle="modal"
										data-backdrop="static" class="sepV_a ttip_t" title="Sửa "><i
											class="icon-pencil"></i></a> <a href="#"
										class="sepV_a ttip_t" title="Xóa"><i class="icon-trash"></i></a>
									</td>
								</tr>
							</tbody>
						</table>
						<div class="pagination right">
							<ul>
								<li class="prev"><a href="#">&lt; Trở lại </a></li>
								<li class="active"><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li class="next "><a href="#">Trang tiếp &gt; </a></li>
							</ul>
						</div>

					</div>
				</div>

			</div>
		</div>

		<!-- Popup add news driver ready -->
		<div class="modal hide" id="addnewdriverready">
			<!-- Form add -->
			<form class="form-horizontal" action="#" method="post">
				<div class="modal-header">
					<button class="close" data-dismiss="modal">×</button>
					<h3>Thêm mới tính sẵn sàng của lái xe</h3>
				</div>
				<div class="modal-body" style="min-height: 300px;">
						<div class="control-group">
							<label class="control-label">Họ tên lái xe <span class="f_req">*</span></label>
							<div class="controls">
								<select name="" class="input-xlarge chzn_a">
									<option>-- Chọn tên tài xế --</option>
									<option>Nguyễn văn A</option>
									<option>Nguyễn văn B</option>
									<option>Nguyễn văn C</option>
									<option>Nguyễn văn D</option>
									<option>Nguyễn văn F</option>
									<option>Nguyễn văn E</option>
								</select>
							</div>
						</div>
				
						<div class="control-group">
							<label class="control-label">Nghỉ từ ngày<span class="f_req">*</span></label>
							<div class="controls">
								<div class="input-append date" id="dr_start">
									<input class="input-small" type="text" readonly="readonly"><span
										class="add-on"><i class="splashy-calendar_day_down"></i></span>
								</div>
							</div>
						</div>
						<div class="control-group">
								<label class="control-label">Nghỉ tới ngày <span class="f_req">*</span>	</label>
								<div class="controls ">
									<div class="input-append date" id="dr_end">
										<input class="input-small" type="text" readonly="readonly"><span
											class="add-on"><i class="splashy-calendar_day_up"></i></span>
									</div>
								</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="inputEmail">Lý do</label>
							<div class="controls">
								<textarea rows="7" cols=""></textarea>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" type="submit">
							<i class="icon-ok icon-white"></i> Lưu lại
						</button>
						<a href="#" class="btn" data-dismiss="modal">Đóng lại</a>
					</div>
			
			</form>
			<!-- End Form  add -->
		</div>
		<!-- end popup driver ready-->
		<!-- Popup edit driver ready -->
		<div class="modal hide" id="editdriverready">
			<!-- Form add -->
			<form class="form-horizontal" action="#" method="post">
				<div class="modal-header">
					<button class="close" data-dismiss="modal">×</button>
					<h3>Sửa tính sẵn sàng của lái xe</h3>
				</div>
				<div class="modal-body" style="min-height: 300px;">
						<div class="control-group">
							<label class="control-label">Họ tên lái xe <span class="f_req">*</span></label>
							<div class="controls">
								<select name="" class="input-xlarge chzn_a">
									<option>-- Chọn tên tài xế --</option>
									<option selected="selected">Nguyễn văn A</option>
									<option>Nguyễn văn B</option>
									<option>Nguyễn văn C</option>
									<option>Nguyễn văn D</option>
									<option>Nguyễn văn F</option>
									<option>Nguyễn văn E</option>
								</select>
							</div>
						</div>
				
						<div class="control-group">
							<label class="control-label">Nghỉ từ ngày<span class="f_req">*</span></label>
							<div class="controls">
								<div class="input-append date" id="edit_dr_start">
									<input class="input-small" type="text" readonly="readonly" value="26/07/2013"><span
										class="add-on"><i class="splashy-calendar_day_down"></i></span>
								</div>
							</div>
						</div>
						<div class="control-group">
								<label class="control-label">Nghỉ tới ngày <span class="f_req">*</span></label>
								<div class="controls ">
									<div class="input-append date" id="edit_dr_end">
										<input class="input-small" type="text" readonly="readonly" value="28/07/2013"><span
											class="add-on"><i class="splashy-calendar_day_up"></i></span>
									</div>
								</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="inputEmail">Lý do</label>
							<div class="controls">
								<textarea rows="7" cols=""> Tôi đang bị ốm quá</textarea>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" type="submit">
							<i class="icon-ok icon-white"></i> Lưu lại
						</button>
						<a href="#" class="btn" data-dismiss="modal">Đóng lại</a>
					</div>
			
			</form>
			<!-- End Form  add -->
		</div>
		<!-- end Popup edit driver ready -->


		<script src="js/jquery.min.js"></script>
		<!-- smart resize event -->
		<script src="js/jquery.debouncedresize.min.js"></script>
		<!-- hidden elements width/height -->
		<script src="js/jquery.actual.min.js"></script>
		<!-- js cookie plugin -->
		<script src="js/jquery.cookie.min.js"></script>
		<!-- main bootstrap js -->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<!-- bootstrap plugins -->
		<script src="js/bootstrap.plugins.min.js"></script>
		<!-- code prettifier -->
		<script src="lib/google-code-prettify/prettify.min.js"></script>
		<!-- tooltips -->
		<script src="lib/qtip2/jquery.qtip.min.js"></script>
		<!-- jBreadcrumbs -->
		<script src="lib/jBreadcrumbs/js/jquery.jBreadCrumb.1.1.min.js"></script>
		<!-- sticky messages -->
		<script src="lib/sticky/sticky.min.js"></script>
		<!-- fix for ios orientation change -->
		<script src="js/ios-orientationchange-fix.js"></script>
		<!-- datepicker -->
		<script src="lib/datepicker/bootstrap-datepicker.min.js"></script>

		<!-- lightbox -->
		<script src="lib/colorbox/jquery.colorbox.min.js"></script>
		<!-- common functions -->
		<script src="js/gebo_common.js"></script>
		<!-- enhanced select (chosen) -->
		<script src="lib/chosen/chosen.jquery.min.js"></script>
		<script>
      $(document).ready(function() {
          $(".chzn_a").chosen({
            allow_single_deselect: true
          });
          // start date
          $('#dr_start').datepicker({format: "mm/dd/yyyy"}).on('changeDate', function(ev){
				var dateText = $(this).data('date');
				
				var endDateTextBox = $('#dr_end input');
				if (endDateTextBox.val() != '') {
					var testStartDate = new Date(dateText);
					var testEndDate = new Date(endDateTextBox.val());
					if (testStartDate > testEndDate) {
						endDateTextBox.val(dateText);
					}
				}
				else {
					endDateTextBox.val(dateText);
				};
				$('#dr_end').datepicker('setStartDate', dateText);
				$('#dr_start').datepicker('hide');
			});
			$('#dr_end').datepicker({format: "mm/dd/yyyy"}).on('changeDate', function(ev){
				var dateText = $(this).data('date');
				var startDateTextBox = $('#dr_start input');
				if (startDateTextBox.val() != '') {
					var testStartDate = new Date(startDateTextBox.val());
					var testEndDate = new Date(dateText);
					if (testStartDate > testEndDate) {
						startDateTextBox.val(dateText);
					}
				}
				else {
					startDateTextBox.val(dateText);
				};
				$('#dr_start').datepicker('setEndDate', dateText);
				$('#dr_end').datepicker('hide');
			});		 
          // end date 
          // start date edit driver
          $('#edit_dr_start').datepicker({format: "mm/dd/yyyy"}).on('changeDate', function(ev){
				var dateText = $(this).data('date');
				
				var endDateTextBox = $('#edit_dr_end input');
				if (endDateTextBox.val() != '') {
					var testStartDate = new Date(dateText);
					var testEndDate = new Date(endDateTextBox.val());
					if (testStartDate > testEndDate) {
						endDateTextBox.val(dateText);
					}
				}
				else {
					endDateTextBox.val(dateText);
				};
				$('#edit_dr_end').datepicker('setStartDate', dateText);
				$('#edit_dr_start').datepicker('hide');
			});
			$('#edit_dr_end').datepicker({format: "mm/dd/yyyy"}).on('changeDate', function(ev){
				var dateText = $(this).data('date');
				var startDateTextBox = $('#edit_dr_start input');
				if (startDateTextBox.val() != '') {
					var testStartDate = new Date(startDateTextBox.val());
					var testEndDate = new Date(dateText);
					if (testStartDate > testEndDate) {
						startDateTextBox.val(dateText);
					}
				}
				else {
					startDateTextBox.val(dateText);
				};
				$('#edit_dr_start').datepicker('setEndDate', dateText);
				$('#edit_dr_end').datepicker('hide');
			});		 
          // end date edit driver
          
          // start date driver search
          $('#s_dr_start').datepicker({format: "mm/dd/yyyy"}).on('changeDate', function(ev){
				var dateText = $(this).data('date');
				
				var endDateTextBox = $('#s_dr_end input');
				if (endDateTextBox.val() != '') {
					var testStartDate = new Date(dateText);
					var testEndDate = new Date(endDateTextBox.val());
					if (testStartDate > testEndDate) {
						endDateTextBox.val(dateText);
					}
				}
				else {
					endDateTextBox.val(dateText);
				};
				$('#s_dr_end').datepicker('setStartDate', dateText);
				$('#s_dr_start').datepicker('hide');
			});
			$('#s_dr_end').datepicker({format: "mm/dd/yyyy"}).on('changeDate', function(ev){
				var dateText = $(this).data('date');
				var startDateTextBox = $('#s_dr_start input');
				if (startDateTextBox.val() != '') {
					var testStartDate = new Date(startDateTextBox.val());
					var testEndDate = new Date(dateText);
					if (testStartDate > testEndDate) {
						startDateTextBox.val(dateText);
					}
				}
				else {
					startDateTextBox.val(dateText);
				};
				$('#s_dr_start').datepicker('setEndDate', dateText);
				$('#s_dr_end').datepicker('hide');
			});		 
          // end date search driver           
      });      
      </script>

	</div>
</body>
</html>